//获取dom
//侧边圆点
let dotList = document.querySelectorAll('#content > .dot li')
//头部
let arrowEl = document.querySelector('#head .headMain > .arrow')
let liNodes = document.querySelectorAll('#head .headMain > .nav > .list > li');
let upNodes = document.querySelectorAll('#head .headMain > .nav > .list > li .up');
let firstLiNode = liNodes[0];
let firstUpNode = firstLiNode.querySelector('.up');
//内容区
let head = document.querySelector('#head');
let content = document.querySelector('#content');
let cLiNodes = document.querySelectorAll('#content .list > li');
let cList = document.querySelector('#content .list')
//第一屏
let cirLiNodes = document.querySelectorAll('#content > .list > .home section .home2 li')
let home1LiNodes = document.querySelectorAll('#content > .list > .home section .home1 > li')
let homeNode = document.querySelector('#content > .list > .home')
//第四屏
let aboutUls = document.querySelectorAll('#content > .list > .about .about3 > .item ul')
//第五屏
let team3LiNodes = document.querySelectorAll('#content > .list > .team ul li')
//同步当前屏索引
let flag = 0;
//初始定义防抖定时器
let timer = 0;
//出入场动画索引
let preIndex = 0;
//音频
let music = document.querySelector('#head .headMain .music')
let audio = document.querySelector('#head .headMain .music audio')

music.onclick = function () {
    if (audio.paused) {
        audio.play()
        music.style.background = 'url(./img/musicon.gif)'
    } else {
        audio.pause()
        music.style.background = 'url(./img/musicoff.gif)'
    }
}

//缩放后调整分辨率
window.onresize = function () {
    contentBind();
    cList.style.top = -flag * (document.documentElement.clientHeight - head.offsetHeight) + 'px';
}

//#region 第一屏交互
let oldIndex = 0;
var timer3D = 0;
let autoIndex = 0;
//变量提升 所以放下面
home3D()
function home3D() {
    //#region 手动
    for (let i = 0; i < cirLiNodes.length; i++) {
        cirLiNodes[i].onclick = function () {
            clearTimeout(timer)
            timer = setTimeout(() => {
                clearInterval(timer3D)
                for (let i = 0; i < cirLiNodes.length; i++) {
                    cirLiNodes[i].classList.remove('active')
                }
                this.classList.add('active')

                //从左往右 当前索引大于上一次索引 rightShow
                if (i > oldIndex) {
                    home1LiNodes[i].classList.add('rightShow')
                    home1LiNodes[oldIndex].classList.add('leftHide')
                    home1LiNodes[i].classList.remove('rightHide')
                    home1LiNodes[i].classList.remove('leftHide')
                    home1LiNodes[i].classList.remove('leftShow')
                    home1LiNodes[oldIndex].classList.remove('rightHide')
                    home1LiNodes[oldIndex].classList.remove('rightShow')
                    home1LiNodes[oldIndex].classList.remove('leftShow')
                }
                //从右往左 当前索引小于上一次索引 leftShow
                if (i < oldIndex) {
                    home1LiNodes[i].classList.add('leftShow')
                    home1LiNodes[oldIndex].classList.add('rightHide')
                    home1LiNodes[i].classList.remove('rightHide')
                    home1LiNodes[i].classList.remove('leftHide')
                    home1LiNodes[i].classList.remove('rightShow')
                    home1LiNodes[oldIndex].classList.remove('leftHide')
                    home1LiNodes[oldIndex].classList.remove('rightShow')
                    home1LiNodes[oldIndex].classList.remove('leftShow')
                }
                //手动轮播同步自动轮播
                autoIndex = i;
                oldIndex = i;
            }, 200)
        }
    }
    //#endregion

    //#region 自动轮播
    move();
    function move() {
        clearInterval(timer3D)
        timer3D = setInterval(function () {
            autoIndex++;
            if (autoIndex == cirLiNodes.length) {
                autoIndex = 0;
            }
            //圆点
            for (let i = 0; i < cirLiNodes.length; i++) {
                cirLiNodes[i].classList.remove('active')
            }
            cirLiNodes[autoIndex].classList.add('active')
            //动画
            home1LiNodes[autoIndex].classList.add('rightShow')
            home1LiNodes[oldIndex].classList.add('leftHide')
            home1LiNodes[autoIndex].classList.remove('rightHide')
            home1LiNodes[autoIndex].classList.remove('leftHide')
            home1LiNodes[autoIndex].classList.remove('leftShow')
            home1LiNodes[oldIndex].classList.remove('rightHide')
            home1LiNodes[oldIndex].classList.remove('rightShow')
            home1LiNodes[oldIndex].classList.remove('leftShow')

            oldIndex = autoIndex;
        }, 2000)
    }
    //#endregion

    //#region 鼠标移入停止轮播 
    homeNode.onmouseenter = function () {
        clearInterval(timer3D)
    }

    homeNode.onmouseleave = function () {
        move();
    }
    //#endregion

}
//#endregion

//#region 第四屏图片效果
picBoom();
function picBoom() {
    for (let i = 0; i < aboutUls.length; i++) {
        change(aboutUls[i]);
    }

    function change(ul) {
        let src = ul.dataset.src;
        var w = ul.offsetWidth / 2;
        var h = ul.offsetHeight / 2;
        for (let i = 0; i < 4; i++) {
            var liNode = document.createElement('li');
            liNode.style.width = w + 'px';
            liNode.style.height = h + 'px';
            let imgNode = document.createElement('img');
            /**
             *  left:0  top:0
             *  left:-w  top:0
             *  left:0  top:-h
             *  left:-w  top:-h
             */

            imgNode.style.left = -(i % 2) * w + 'px'
            imgNode.style.top = -Math.floor(i / 2) * h + 'px'
            imgNode.src = src;

            liNode.appendChild(imgNode)
            ul.appendChild(liNode)

        }

        ul.onmouseenter = function () {
            let imgNodes = this.querySelectorAll('li img')
            /**
             *  left:0  top:h
             *  left:-2w  top:0
             *  left:w  top:-h
             *  left:-w  top:-2h
             */
            imgNodes[0].style.top = h + 'px';
            imgNodes[1].style.left = -2 * w + 'px';
            imgNodes[2].style.left = w + 'px';
            imgNodes[3].style.top = -2 * h + 'px';

        };

        ul.onmouseleave = function () {
            let imgNodes = this.querySelectorAll('li img')
            imgNodes[0].style.top = 0 + 'px';
            imgNodes[1].style.left = - w + 'px';
            imgNodes[2].style.left = 0 + 'px';
            imgNodes[3].style.top = -h + 'px';
        };
    }
}
//#endregion

//#region 第五屏交互
team();
//定时器
let tim1
let tim2
function team() {
    let oc = null;
    for (let i = 0; i < team3LiNodes.length; i++) {
        team3LiNodes[i].onmouseenter = function () {
            for (let i = 0; i < team3LiNodes.length; i++) {
                team3LiNodes[i].style.opacity = '0.5'
            }
            this.style.opacity = '1'
            addCanvas(i)
        }
        team3LiNodes[i].onmouseleave = function () {
            for (let i = 0; i < team3LiNodes.length; i++) {
                team3LiNodes[i].style.opacity = '1'
            }
            removeOc();
        }
    }
    function addCanvas(index) {
        if (!oc) {
            oc = document.createElement('canvas')
            team3LiNodes[index].appendChild(oc)
            oc.width = team3LiNodes[0].offsetWidth;
            oc.height = team3LiNodes[0].offsetHeight * 2 / 3;
            QiPao()
        }
    }
    //气泡动画
    function QiPao() {
        if (oc.getContext) {
            var ctx = oc.getContext('2d');
            var arr = [];
            //将数组中的圆绘制到画布上
            tim1 = setInterval(function () {
                ctx.clearRect(0, 0, oc.width, oc.height)
                //动画
                for (var i = 0; i < arr.length; i++) {

                    arr[i].deg += 5;
                    arr[i].x = arr[i].startX + Math.sin(arr[i].deg * Math.PI / 180) * arr[i].step * 2;
                    arr[i].y = arr[i].startY - (arr[i].deg * Math.PI / 180) * arr[i].step;
                    if (arr[i].y < 50) {
                        arr[i].alp -= 0.05
                    }
                    if (arr[i].alp <= 0) {
                        arr.splice(i, 1)
                    }
                }
                //绘制
                for (var i = 0; i < arr.length; i++) {
                    ctx.save();
                    ctx.fillStyle = `rgba(${arr[i].red},${arr[i].green},${arr[i].blue},${arr[i].alp})`
                    ctx.beginPath()
                    ctx.arc(arr[i].x, arr[i].y, arr[i].r, 0, 2 * Math.PI)
                    ctx.fill();
                    ctx.restore();
                }
            }, 1000 / 60);


            //往arr中注入随机圆的信息
            tim2 = setInterval(function () {
                var r = Math.random() * 5 + 2;
                var x = Math.random() * oc.width
                var y = oc.height - r;
                var red = Math.round(Math.random() * 255);
                var green = Math.round(Math.random() * 255);
                var blue = Math.round(Math.random() * 255);
                var alp = 1;
                //曲线运动
                var deg = 0;
                var startX = x;
                var startY = y;
                var step = Math.random() * 20 + 6;
                arr.push({ x, y, r, red, green, blue, alp, deg, startX, startY, step })
            }, 100)
        }
    }
    //移除
    function removeOc() {
        clearInterval(tim1)
        clearInterval(tim2)
        oc.remove()
        oc = null;
    }
}

//#endregion

//#region 头部交互
headBind();
function headBind() {
    arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth / 2 - arrowEl.offsetWidth / 2 + 'px';
    firstUpNode.style.width = '100%';
    //导航点击事件
    for (let i = 0; i < liNodes.length; i++) {
        liNodes[i].onclick = function () {
            preIndex = flag;
            move(i);
            flag = i;
        }
    }

    for (let i = 0; i < dotList.length; i++) {
        dotList[i].onclick = function () {
            preIndex = flag;
            move(i);
            flag = i;
        }
    }
}
//#endregion

//#region内容交互
contentBind();
function contentBind() {
    //内容区高度
    content.style.height = document.documentElement.clientHeight - head.offsetHeight + 'px';
    for (let i = 0; i < cLiNodes.length; i++) {
        // 每一屏高度
        cLiNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight + 'px';
    }
}
//#region 滚动事件
//滚轮事件
if (content.addEventListener) {
    content.addEventListener('DOMMouseScroll', function (ev) {
        //防抖
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn(ev)
        }, 200);
    });
}
//滚轮事件
content.onmousewheel = function (ev) {
    //防抖
    clearTimeout(timer)
    timer = setTimeout(() => {
        fn(ev)
    }, 200);
};
////滚轮事件核心
function fn(ev) {
    let dir = '';
    if (ev.wheelDelta) {
        dir = ev.wheelDelta > 0 ? 'up' : 'down';
    } else if (ev.detail) {
        dir = ev.detail < 0 ? 'up' : 'down';
    }

    preIndex = flag;
    switch (dir) {
        case 'up':
            if (flag > 0) {
                flag--;
                move(flag)
            }
            break;
        case 'down':
            if (flag < cLiNodes.length - 1) {
                flag++;
                move(flag)
            }
            break;
    }
}
//#endregion
//#endregion


//出入场动画
var aniArr = [
    {
        inAni: function () {
            let home1 = document.querySelector('#content > .list > .home section .home1');
            let home2 = document.querySelector('#content > .list > .home section .home2');
            home1.style.transform = 'translateY(0px)';
            home1.style.opacity = 1;
            home2.style.transform = 'translateY(0px)';
            home2.style.opacity = 1;
        },
        outAni: function () {
            let home1 = document.querySelector('#content > .list > .home section .home1');
            let home2 = document.querySelector('#content > .list > .home section .home2');
            home1.style.transform = 'translateY(-400px)';
            home1.style.opacity = 0;
            home2.style.transform = 'translateY(100px)';
            home2.style.opacity = 0;
        },
    },
    {
        inAni: function () {
            let plane1 = document.querySelector('#content > .list > .course .plane1');
            let plane2 = document.querySelector('#content > .list > .course .plane2');
            let plane3 = document.querySelector('#content > .list > .course .plane3');
            plane1.style.transform = 'translate(0px,0px)';
            plane2.style.transform = 'translate(0px,0px)';
            plane3.style.transform = 'translate(0px,00px)';
        },
        outAni: function () {
            let plane1 = document.querySelector('#content > .list > .course .plane1');
            let plane2 = document.querySelector('#content > .list > .course .plane2');
            let plane3 = document.querySelector('#content > .list > .course .plane3');
            plane1.style.transform = 'translate(-200px,-200px)';
            plane2.style.transform = 'translate(-200px,200px)';
            plane3.style.transform = 'translate(200px,-200px)';
        },
    },
    {
        inAni: function () {
            let pancel1 = document.querySelector('#content > .list > .works .pencel1');
            let pancel2 = document.querySelector('#content > .list > .works .pencel2');
            let pancel3 = document.querySelector('#content > .list > .works .pencel3');
            pancel1.style.transform = 'translateY(0px)';
            pancel2.style.transform = 'translateY(0px)';
            pancel3.style.transform = 'translateY(0px)';
        },
        outAni: function () {
            let pancel1 = document.querySelector('#content > .list > .works .pencel1');
            let pancel2 = document.querySelector('#content > .list > .works .pencel2');
            let pancel3 = document.querySelector('#content > .list > .works .pencel3');
            pancel1.style.transform = 'translateY(-100px)';
            pancel2.style.transform = 'translateY(100px)';
            pancel3.style.transform = 'translateY(100px)';
        },
    },
    {
        inAni: function () {
            let rect1 = document.querySelector('#content > .list > .about .about3 > .item:nth-child(1)');
            let rect2 = document.querySelector('#content > .list > .about .about3 > .item:nth-child(2)');
            rect1.style.transform = 'rotate(0deg)';
            rect2.style.transform = 'rotate(0deg)';
        },
        outAni: function () {
            let rect1 = document.querySelector('#content > .list > .about .about3 > .item:nth-child(1)');
            let rect2 = document.querySelector('#content > .list > .about .about3 > .item:nth-child(2)');
            rect1.style.transform = 'rotate(45deg)';
            rect2.style.transform = 'rotate(-45deg)';
        },
    },
    {
        inAni: function () {
            let team1 = document.querySelector('#content > .list > .team .team1')
            let team2 = document.querySelector('#content > .list > .team .team2')
            team1.style.transform = 'translateX(0px)';
            team2.style.transform = 'translateX(0px)';
        },
        outAni: function () {
            let team1 = document.querySelector('#content > .list > .team .team1')
            let team2 = document.querySelector('#content > .list > .team .team2')
            team1.style.transform = 'translateX(-200px)';
            team2.style.transform = 'translateX(200px)';
        },
    }
];

setTimeout(() => {
    aniArr[0].inAni()
}, 1000);


for (let i = 0; i < aniArr.length; i++) {
    aniArr[i]['outAni']()
}


//测试用
// aniArr[4].outAni()
// setTimeout(() => {
//     aniArr[4].inAni()
// }, 2000);


//#region 动画核心函数
move(0)
function move(index) {
    for (let i = 0; i < upNodes.length; i++) {
        upNodes[i].style.width = '';
    }
    upNodes[index].style.width = '100%'
    arrowEl.style.left = liNodes[index].offsetLeft + liNodes[index].offsetWidth / 2 - arrowEl.offsetWidth / 2 + 'px';
    cList.style.top = -index * (document.documentElement.clientHeight - head.offsetHeight) + 'px';

    for (let i = 0; i < dotList.length; i++) {
        dotList[i].classList.remove('active');
    }
    dotList[index].classList.add('active');

    //出入场
    if (aniArr[preIndex] && typeof aniArr[preIndex]['outAni'] === 'function') {
        aniArr[preIndex]['outAni']();
    }
    if (aniArr[index] && typeof aniArr[index]['inAni'] === 'function') {
        aniArr[index]['inAni']();
    }

}
//#endregion
